CSS : Exercice sur les pseudo-classes et transitions.

Encore une fois, continuez à étoffer votre projet de base. Créez un nouveau fichier HTML et CSS, mais cette fois, cette page servira de page de ressources, comme les bibliographies que vous faisiez à l'école, et compilera tous les liens que vous utilisez pour votre site, vos références, là où vous trouvez vos infos, vos images, etc.

1. Créez un fichier HTML contenant une liste de liens (par exemple, une table des matières pour des ressources externes).
2. Utilisez les balises <a> pour créer vos liens.
3. Appliquez des pseudo-classes aux liens pour créer des transitions fluides lors des interactions de l'utilisateur. Utilisez au moins deux des pseudo-classes suivantes : :hover, :focus, :active, et :visited.
4. Choisissez des propriétés CSS à animer lorsqu'une pseudo-classe est activée. Par exemple, vous pouvez animer la couleur du texte, la couleur de fond ou la taille de la police.
5. Utilisez également au moins deux timing functions différentes pour les transitions de vos liens. Par exemple, vous pouvez utiliser ease pour certaines transitions et linear pour d'autres, si vous avez le temps, customisez-en vous même cubic-bezier.
6. Assurez-vous que les transitions sont fluides et agréables à l'œil, ce qui signifie qu'elles ne doivent pas être trop brusques. Pour ceux qui ne savent pas, n'hésitez pas à demander à coup de main aux autres pour qu'ils vous décrivent le rendu.
7. Ajoutez un commentaire dans votre code CSS pour expliquer quelles pseudo-classes et timing functions vous avez utilisées pour chaque transition et qu'est-ce qu'elle fait avec vos mots.
8. Testez votre page en l'ouvrant dans un navigateur web pour vous assurer que les transitions fonctionnent correctement.
9. Facultatif : Ajoutez du contenu supplémentaire à votre page, comme des images ou des descriptions pour chaque lien.
10. Stylisez ce contenu rajouté, si vous avez mis un descriptifs, mettez le texte en gris par exemple, ou faites-le apparaître uniquement quand la souris passe au dessus du lien concerné ! Mettez-vous des petits challenge, c'est là que vous allez progresser.

• Utilisez des couleurs, des polices et des propriétés de transition qui correspondent au style de votre page.
• Expérimentez avec différentes combinaisons de pseudo-classes et de timing functions pour obtenir des résultats visuels intéressants.
• Assurez-vous que votre page est bien structurée en HTML avec des balises sémantiques pour une accessibilité accrue.
• N'hésitez pas à personnaliser votre page en fonction de votre propre créativité et de vos préférences de design.
• Demandez de l'aide à vos camarades et regardez ce que les autres font et comment ! Vous n'avez pas la science infuse, moi non plus, inspirons-nous les uns les autres !

#cours #blindcode #css #programmation #frontend

créé le 2023-09-01 à 11:19